<template>
  <transition name="hm-pageload">
    <div class="loading" v-if="visible" ref="loading">
      <div class="loading_content">
        <div class="lc_line lc_line-out"></div>
        <div class="lc_line lc_line-mid"></div>
        <div class="lc_line lc_line-in"></div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "hm-pageload",
  data() {
    return { visible: true, closed: false };
  },
  watch: {
    closed(val) {
      if (val) {
        this.visible = false;
      }
    },
  },
  methods: {
    close() {
      this.closed = true;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/variables.scss";
.loading {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background-color: #000;
  .loading_content {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .lc_line {
      position: absolute;
      border-radius: 50%;
      border: 3px solid $hm-border;
    }
    .lc_line-out {
      width: 60%;
      height: 60%;
      top: 20%;
      left: 20%;
      border-left-color: transparent;
      border-right-color: transparent;
      animation: spin 2s linear reverse infinite;
    }
    .lc_line-mid {
      width: 52%;
      height: 52%;
      top: 24%;
      left: 24%;
      border-top-color: transparent;
      border-bottom-color: transparent;
      animation: spin 2s linear infinite;
    }
    .lc_line-in {
      width: 20%;
      height: 20%;
      top: 40%;
      left: 40%;
      border-left-color: transparent;
      border-right-color: transparent;
      animation: spin 1s linear infinite;
    }
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hm-pageload-enter {
  opacity: 0;
}
.hm-pageload-enter-active {
  transition: opacity 0.3s ease;
}
.hm-pageload-leave-to {
  transform: translateY(100%);
  opacity: 0;
}
.hm-pageload-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
</style>
